gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
}
//////////////////////////////////////////////////
// 设定界⾯显⽰相关操作
//////////////////////////////////////////////////
function setScreenText(me) {
    let screen = document.querySelector('#screen');
    if (me) {
        screen.innerHTML = "轮到你落⼦了!";
    } else {
        screen.innerHTML = "轮到对⽅落⼦了!";
    }
}
//////////////////////////////////////////////////
// 初始化 websocket
//////////////////////////////////////////////////
//

let webSocketUrl = "ws://" + location.host + "/game";
let websocket = new WebSocket(webSocketUrl);
//连接成功建⽴的回调⽅法
websocket.onopen = function (event) {
    console.log("连接房间成功");
}
//连接关闭的回调⽅法
websocket.onclose = function () {
    console.log("游戏服务器断开连接");
}
//连接发⽣错误的回调⽅法
websocket.onerror = function () {
    console.log("error");
    alert('和服务器的连接出现异常! 返回游戏⼤厅!')
    location.replace('/game_hall.html')
};
//监听窗⼝关闭事件，当窗⼝关闭时，主动去关闭websocket连接，防⽌连接还没断开就关闭窗⼝，server端会抛异常。
window.onbeforeunload = function () {
    websocket.close();
}
//处理服务器返回的数据
websocket.onmessage = function (event) {
    console.log('handlerGameReady: ' + event.data);
    let response = JSON.parse(event.data);

    if (!response.ok) {
        alert('连接游戏失败! reason: ' + response.reason);
        location.replace('/game_hall.html')
        return;
    }

    if (response.message === 'gameReady') {
        // 初始化游戏信息
        gameInfo.roomId = response.roomId;
        gameInfo.thisUserId = response.thisUserId;
        gameInfo.thatUserId = response.thatUserId;
        gameInfo.isWhite = (response.whiteUserId === gameInfo.thisUserId);

        console.log('[gameReady] ' + JSON.stringify(gameInfo));
        // 初始化棋盘
        initGame();
        // 设置 #screen 的显⽰
        setScreenText(gameInfo.isWhite);
        return;
    }else if(response.message === "repeatConnection"){
        alert("检测到多开")
        location.replace("/login.html");

    }


}
//////////////////////////////////////////////////

// 初始化⼀局游戏
//////////////////////////////////////////////////
function initGame() {
    // 是我下还是对⽅下. 根据服务器分配的先后⼿情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表⽰棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图⽚
    let logo = new Image();
    logo.src = "image/zhuozi.png";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }
    // 绘制棋盘⽹格
    function initChessBoard() {
        for (let i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 430);
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(435, 15 + i * 30);
            context.stroke();
        }
    }
    // 绘制⼀个棋⼦, me 为 true
    function oneStep(i, j, isWhite) {
        context.beginPath();
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j *
            30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");

            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }
    chess.onclick = function (e) {
        if (over) {
            return;
        }
        if (!me) {
            return;
        }
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是⾏
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        if (chessBoard[row][col] === 0) {
            // TODO 发送坐标给服务器, 服务器要返回结果

            send(row,col);

            // oneStep(col, row, gameInfo.isWhite);
            // chessBoard[row][col] = 1;
        }
    }
    // TODO 实现发送落⼦请求逻辑, 和处理落⼦响应逻辑.
    function send(row,col){
        let req = {
            message:"putChess",
            userId: gameInfo.thisUserId,
            row:row,
            col:col,

        };
        //网络上得转换成字符串
        websocket.send(JSON.stringify(req));

    }

    // 此处修改 websocket 的 onmessage 回调。之前的 onmessage 回调处理游戏就绪和初始化的逻辑。
    // 一旦初始化完成，此时 onmessage 就要处理 "落子响应"
    websocket.onmessage = function (event) {
        console.log('handlerPutChess: ' + event.data);
        let response = JSON.parse(event.data);

        // 新增：处理聊天消息
        if (response.message === 'chat') {
            const chatMessages = document.getElementById('chatMessages');
            const isMyMessage = response.userId === gameInfo.thisUserId;
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isMyMessage ? 'my-message' : 'other-message'}`;
            messageDiv.textContent = `${isMyMessage ? '我' : '对手'}: ${response.content}`;
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            return; // 避免进入落子逻辑
        }

        if (response.message !== 'putChess') {
            console.log('响应类型错误!');
            return;
        }
        // 1. 判断 userId 是⾃⼰的响应还是对⽅的响应,
        // 以此决定当前这个⼦该画啥颜⾊的
        if (response.userId === gameInfo.thisUserId) {
            //我自己落得子
            oneStep(response.col, response.row, gameInfo.isWhite);
        } else if (response.userId === gameInfo.thatUserId) {
            //对方落得子
            oneStep(response.col, response.row, !gameInfo.isWhite);
        } else {
            console.log('[putChess] response userId 错误! response=' + JSON.stringify(response));
            return;
        }
        //更新二维数组区分是否落子
        chessBoard[response.row][response.col] = 1;
        me = !me; // 接下来该下个⼈落⼦了.
        // 2. 判断游戏是否结束
        // 修改后代码
        if (response.winner !== 0) {
            // 延迟弹窗，确保渲染完成
            setTimeout(() => {
                if (response.winner === gameInfo.thisUserId) {
                    alert("你赢了!");
                } else if (response.winner === gameInfo.thatUserId) {
                    alert("你输了");
                } else {
                    alert("winner有错误!" + response.winner);
                }
                location.replace('/game_hall.html');
            }, 100); // 100ms延迟确保棋子绘制完成
        }
        // 3. 更新界⾯显⽰
        setScreenText(me);
    }
    initChat();



}
// 新增聊天初始化函数
function initChat() {
    const messageInput = document.getElementById('messageInput');
    const sendBtn = document.getElementById('sendBtn');
    const chatMessages = document.getElementById('chatMessages');

    // 发送消息
    sendBtn.onclick = () => sendChatMessage(messageInput, chatMessages);
    messageInput.onkeydown = (e) => {
        if (e.key === 'Enter') sendChatMessage(messageInput, chatMessages);
    };
}

// 发送聊天消息到服务器
function sendChatMessage(input, chatContainer) {
    const content = input.value.trim();
    if (!content) return;

    // 构造聊天消息格式
    const chatReq = {
        message: 'chat', // 消息类型为聊天
        userId: gameInfo.thisUserId,
        content: content
    };
    websocket.send(JSON.stringify(chatReq));
    input.value = ''; // 清空输入框
}

